// Like and Watch number component

// Common styles for all list items
@mixin list-itemtype-common {
    @include list-itemtype-track;
    border-bottom: 1px solid $color-gray400;
    display: flex;
    padding: .5rem;
    .list-itemtype-data-title {
        color: $color-black600;
        margin-block-start: .25rem;
        text-transform: none;
    }
    .list-itemtype-data-meta {
        align-items: center;
        column-gap: .25rem;
        display: flex;
        flex-wrap: wrap;
        row-gap: .25rem;
    }
    .list-itemtype-avatar {
        flex-basis: 3rem;
        flex-shrink: 0;
        margin-right: .75rem;
        min-width: 3rem;
        img {
            border-radius: 50%;
            width: 100%;
        }
    }
    .ticket-status {
        margin-right: .25rem;
    }
}

.list-itemtype-project {
    @include list-itemtype-common;
    justify-content: space-between;
    .list-itemtype-data-title {
        @include font-size(large);
        align-items: center;
        display: flex;
        gap: .25rem;
    }
    .icon-blocked-project {
        @include svg-size(.75rem);
    }
    .icon {
        fill: $grey-70;
        stroke: $grey-70;
    }
    .list-itemtype-project-data-wrapper {
        display: flex;
        .icon-private {
            fill: $gray-light;
            height: 22px;
            margin-left: .5rem;
            width: 22px;
        }
    }
    .list-itemtype-project-image {
        flex-shrink: 0;
        margin-right: .5rem;
        width: 3rem;
        img {
            width: 100%;
        }
    }
    .list-itemtype-project-members {
        align-self: flex-end;
        display: flex;
        flex-direction: row-reverse;
        flex-grow: 0;
        flex-wrap: wrap-reverse;
        margin-top: 1rem;
        img {
            border-radius: .1rem;
            margin-right: .3rem;
            width: 2rem;
        }
    }
    .tag {
        align-self: flex-end;
        margin: 0 .25rem .25rem 0;
        padding: .5rem;
    }
}

.list-itemtype-ticket {
    @include list-itemtype-common;
    position: relative;
    .ticket-type {
        color: $color-link-tertiary;
        text-transform: uppercase;
    }
    .ticket-project {
        color: $default-tags;
    }
    .list-itemtype-ticket-data {
        flex: 1;
        margin-right: 1rem;
    }
    .ticket-id {
        color: $color-link-primary;
    }
    .ticket-blocked {
        color: $color-link-red;
        margin-right: .25rem;
    }
}


.list-itemtype-user {
    @include list-itemtype-common;
    .extra-info {
        @include font-size(small);
        margin-top: .25rem;
    }
}
